<script type="text/javascript" src="module/monitor_obj/monitor_info.js"></script>
<style>
	.pg-content{
		padding: 0;
	}
	.base-info-div .form-horizontal .form-group{
		display: flex;
		margin:0;
	}
	.monitor-show{
		width: 100%;
		height: 100%;
		padding:20px;
	}
	.monitor-head{
		position: relative;
		height : 50px;
		margin-bottom: 10px;
	}
	.monitor-head-name{
		position: relative;
		padding-left: 50px;
	}
	.monitor-head-name > div{
		position: absolute;
		left:0;
		top:0;
		width:46px;
		height:46px;
		background-size: 100% 100%;
	}
	.monitor-head-name > p{
		display: block;
		position: relative;
		top : 6px;
		font-size: 20px;
    	font-weight: bold;
		margin: 0 !important;
		padding: 0 0 0 0 !important;
	}
	.monitor-head-name > span{
		display: block;
	}
	.monitor-head-time{
		position: absolute;
		right: 0;
		top: 10px;
	}
	.monitor-head-time .oper{
		display: block;
		float: left;
	    width: 15px;
	    height: 15px;
	    margin-right: 10px;
	    background-size: 100% 100%;
	}
	.monitor-head-time .oper:hover{
		cursor: pointer;
		opacity: 0.8;
	}
	.monitor-head-time > input{
		position: absolute;
	    right: -5px;
	    top: 0px;
	    width: 25px;
	    opacity: 0;
	    height: 20px;
	    cursor: pointer;
	}
	.monitor-tab{
		border-bottom:1px solid #ddd;
		padding-left: 100px;
		margin-bottom: 10px;
	}
	.monitor-tab ul li{
		display: inline-block;
		position: relative;
		padding: 10px;
		cursor: pointer;
	}
	.monitor-tab ul li.active{
		border: 1px solid #ddd;
		border-bottom: 1px solid rgba(0,0,0,0);
		background-color: #fff;
		top: 1px;
	}
	.monitor-tab-div{
		display: none;
	}
	.monitor-tab-div:first-child{
		display: block;
	}
	.system-health{
		border:1px solid #ddd;
		background-color: #fff;
	}
	.system-health-title{
		padding:10px 0;
		text-align: center;
	}
	.m-panel{
		border:1px solid #ddd;
		margin-bottom: 10px;
	}
	.m-panel-title{
		line-height: 26px;
		padding-left: 10px;
		border-bottom: 1px solid #ddd;
		background-color: #eee;
	}
	.m-panel-sel{
		padding : 10px 10px 10px 30px;
	}
	.m-panel-sel > div{
		display: inline-block;
	}
	.m-panel-sel > div:nth-child(1){
		position: relative;
		top : 2px;
	}
	.m-panel-sel > div:nth-child(2){
		width : 300px;
	}
	.m-panel-body{
		min-height: 100px;
		padding:10px;
		background-color: #fff;
	}

	.m-panel-body-card{
		padding:10px 10px 10px 15px;
	}

	.m-panel-body-card > ul > li{
		display: inline-block;
		padding: 5px 15px;
		color: #fff;
		background-color: #3e4753;
		opacity: 0.35;
		cursor: pointer;
	}

	.m-panel-body-card > ul > li:hover,
	.m-panel-body-card > ul > li.active{
		opacity: 1;
	}
	.base-info-div .form-group:nth-child(2n+1){
		background-color: #d9d9d9;
	}
	.base-info-div .form-group:nth-child(2n+1) label:nth-child(2n){
		background-color: #f2f2f2;
	}
	.base-info-div .form-group:nth-child(2n){
		background-color: #e5e5e5;
	}
	.base-info-div .form-group:nth-child(2n) label:nth-child(2n){
		background-color: #fff;
	}
	.base-info-div .form-group label{
		min-height: 30px;
	}
	.box{
		display: flex;
	}
	.box .box-item:first-child{
		padding-right:10px;
	}
	.monitor-chart{
		width:100%;
		height: 200px;
	}
	.useage-title{
		margin-bottom: 25px;
		margin-top: 20px;
	}
	.useage-title > div span{
		padding: 5px 10px;
		border:1px solid #ddd;
	}
	.useage-content{
		padding:0 10px;
	}
	.useage-content > div{
		margin-bottom: 20px;
	}
	.useage-content > div > div:first-child{
		width:80px;
		padding:5px;
	}
	.useage-content > div > div:nth-child(2n){
		position: relative;
		background-color: #eee;
	}
	.useage-content > div > div:nth-child(2n) > div{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0%;
		background-color: #2c97dd;
	}
	.useage-title > div span:first-child{
		border-right:none;
		background-color: #eee;
	}
	.table-div{
		min-height: 200px;
	}
	.table-oper{
		float: right;
		position: absolute;
		right: 0;
		top: 0;
	}
</style>

<div class="monitor-show">

	<input type="hidden" data-id="monitorId" />
	<input type="hidden" data-id="param-assetId" />
	<input type="hidden" data-id="param-monitorTypeId" />

	<!-- 监控器tab -->
	<div class="monitor-tab" id="monitor_tab">
		<ul></ul>
	</div>

	<!-- 监控器名字 -->
	<div class="monitor-head">
		<div class="monitor-head-name">
			<div></div>
			<p></p>
			<!-- <span data-type="monitor-head-ip">&nbsp;</span> -->
		</div>
		<div class="monitor-head-time">
			<i class="run-btn oper" id="run_btn_i" title="运行" style="display:none"></i>
			<i class="refresh-btn oper" id="refresh_btn_i" title="刷新"></i>
			<span id="query_time_label"></span>
			<i class="icon-cog icon-animate"></i>
			<input type="text" id="timeinphidden">
		</div>
	</div>

	<div style="padding: 10px;border: 1px solid #ddd;background-color: #fff;">
		<!-- tab展示 -->
		<div class="monitor-tab" id="monitor_tab_s">
			<ul>
				<li class="active">监控信息</li>
				<li>事件</li>
			</ul>
		</div>

		<!-- 系统监控度 -->
		<div class="m-panel system-health" data-type="system-health"></div>

		<div id="monitor_info"></div>
	</div>
</div>